/*
 * MinIO Cloud Storage (C) 2018 MinIO, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react"
import { connect } from "react-redux"
import ReactEcharts from 'echarts-for-react';
import axios from "axios";
import {BASE_URL} from "./actions"
import * as alertActions from "../alert/actions"
export class Panel extends React.Component {
  // class Panel extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data1: 0,
      data2: 1
    }
  }

  // 发送ajax请求
  componentDidMount(){
    const { showAlert } = this.props
    let url = BASE_URL+"/query?query=minio_disks_offline&time=1591150655.683&_=1591149430810";
    console.log(BASE_URL)
    // axios方式
    var interval = setInterval(
      function(){
        axios.get(url)
          .then(
            (response)=>{
              console.log(response.data.data.result[0].value[1])
              var data1 = response.data.data.result[0].value[1]
                  showAlert({
                    type: "success",
                    message: data1
                  })
              this.setState({
                data1: data1
              })
            }
          )
          .catch(
            (error)=>{
              console.log(error)
              clearInterval(interval);
            }
          )
      },5000)
  }
  getOption() {
    let a = this.state.data1;
    return {
      title: {
        text: '',
        color: '#fff'
      },
      tooltip : {
        trigger: 'axis'
      },
      legend: {
        data:['A','B','C'],
        textStyle:{
					color:"#fff",
				}
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'category',
          boundaryGap : false,
          data : ['周一','周二','周三','周四','周五','周六','周日'],
          color: '#fff',
          axisLine: {
            lineStyle: {
                color: '#fff'
            }
          }
        }
      ],
      yAxis : [
        {
          type : 'value',
          axisLine: {
            lineStyle: {
                color: '#fff'
            }
          }
        }
      ],
      series : [
        {
          name: 'A',
          type:'line',
          stack: '总量',
          areaStyle: {normal: {}},
          data:[120, a, 101, 134, 90, 230, 210]
        },
        {
          name:'B',
          type:'line',
          stack: '总量',
          areaStyle: {normal: {}},
          data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
          name:'C',
          type:'line',
          stack: '总量',
          areaStyle: {normal: {}},
          data:[150, 232, 201, 154, 190, 330, 410]
        }
      ]
    };
  };
  render() {
    return (
      <div className="fe-header-panel">
        <div className='examples'>
          <div className='parent'>
            <ReactEcharts
              option={this.getOption()}
              style={{height: '350px', width: '100%'}}
              className='react_for_echarts' />
          </div>
        </div>
      </div>
    );
  }
};

const mapDispatchToProps = dispatch => {
  return {
    showAlert: alert => dispatch(alertActions.set(alert))
  }
}
export default connect(
  mapDispatchToProps
)(Panel)
// export const Panel = () => (
//   <div className="fe-header-panel">
//     <div>
//         <h2>asdasdada</h2>
//         {/* <ReactEcharts 
//           option={this.getOption()} 
//           style={{height: '350px', width: '100%'}}  
//           className='react_for_echarts' /> */}
//     </div>
//   </div>
// )

// const mapStateToProps = state => {
//   return {
//     sidebarOpen: state.browser.sidebarOpen
//   }
// }

// const mapDispatchToProps = dispatch => {
//   return {
//     toggleSidebar: () => dispatch(actionsCommon.toggleSidebar())
//   }
// }

// export default connect()(Panel)
